<template>
  <div id="detaildiv">
    <Detailsimple :GoodsItem="GoodsItem"></Detailsimple>
    <el-card>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index=1>商品介绍</el-menu-item>
        <el-menu-item index=2>售后保障</el-menu-item>
        <el-menu-item index=3>商品评论</el-menu-item>
      </el-menu>
      <Detailspecific :activeIndex="activeIndex"></Detailspecific>
    </el-card>
  </div>
</template>
<script>
import { useRoute } from 'vue-router'
import { onMounted, ref } from "vue";
import {getGoodsDetail} from "@/apis/getData.js";
import Detailsimple from "@/components/Detailsimple.vue";
import Detailspecific from "@/components/Detailspecific.vue";

export default {
  components: {
    Detailsimple,
    Detailspecific,
  },
  setup(){
    const GoodsItem=ref({});
    let activeIndex=ref(1);    
    onMounted(()=>{
     const route = useRoute();
     const gid=route.query.gid;

     getGoodsDetail(gid).then(res=>{GoodsItem.value=res.data.data;});
    })

    function handleSelect(key){
      activeIndex.value=key;
    }
    return {
      GoodsItem,
      activeIndex,
      handleSelect
    };
  }
};
</script>
<style scoped>
#detaildiv {
  width: 1100px;
  margin: 0 auto;
}
</style>